/**
 * Created by zhouli on 18/3/8
 * Email li.zhou@huilianyi.com
 * 消费商信息
 * 1.四种消费商，可以用公司的 profile 配置，是员工所属公司,从员工信息获取 companyOID
 * 2.特殊点：针对老公司，就只有一个，从登录的公司获取 companyOID
 */
import React from 'react';
import {messages} from "share/common";
import 'styles/enterprise-manage/person-manage/person-detail/person-detail-components/vendor-info.scss';
import {Button, Form, Select, Col, Row, Switch, Icon, Input, Tabs, Popover} from 'antd';
import PDService from 'containers/enterprise-manage/person-manage/person-detail/person-detail.service';
import Chooser from 'components/chooser';

const {TabPane} = Tabs;
const FormItem = Form.Item;
const Option = Select.Option;

class PersonVendorInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      nowTab: "VendorInfo",//FanJia  KongGang  YouXing
      ctripList: [],//携程子账户
      helpOthersBookCodeList: [],//代订类型
      bookTheScopeCodeList: [],//代订范围
      vendorObj: {},
    }
  }

  componentDidMount() {
    let vendorObj = this.props.vendorObj;
    //根据配置，设置一个激活的 tab
    let filed = PDService.getRenderList(this.props.userCompanyProfile);
    this.setState({
      vendorObj,
      nowTab: filed[0].key //VendorInfo 可能没有被配置
    });
    this.getValueList();
  }

  //获取需要的值列表
  getValueList = () => {
    //获取携程子账户
    this.getSystemValueList(1003)
      .then(res => {
        this.setState({
          ctripList: res.data.values
        })
      });
    this.getSystemValueList(2217)
      .then(res => {
        this.setState({
          helpOthersBookCodeList: res.data.values
        })
      });
    this.getSystemValueList(2218)
      .then(res => {
        this.setState({
          bookTheScopeCodeList: res.data.values
        })
      });
  }
  componentWillReceiveProps(nextProps) {
    let vendorObj = nextProps.vendorObj;
    this.setState({vendorObj});
  }

  getReqVendorObj = (values) => {
    let {nowTab, vendorObj} = this.state; // VendorInfo  FanJia  KongGang  YouXing
    switch (nowTab) {
      case "VendorInfo": {
        vendorObj.confirmPassword = values.confirmPassword;
        vendorObj.confirmUserOID = values.confirmUser.length > 0 ? values.confirmUser[0].userOID : null;
        vendorObj.confirm2UserOID = values.confirm2User.length > 0 ? values.confirm2User[0].userOID : null;
        vendorObj.confirmCCUserOID = values.confirmCCUser.length > 0 ? values.confirmCCUser[0].userOID : null;
        vendorObj.confirm2CCUserOID = values.confirm2CCUser.length > 0 ? values.confirm2CCUser[0].userOID : null;
        //前端没有变，直接上传源值
        //携程子账户
        if (vendorObj.subAccountName !== values.subAccountName) {
          vendorObj.subAccountCode = values.subAccountName;
        }
        // 代订类型
        if (vendorObj.helpOthersBookName !== values.helpOthersBookName) {
          vendorObj.helpOthersBookCode = values.helpOthersBookName;
        }
        // 代订范围 特殊字段 有交互控制其他字段
        if (vendorObj.bookTheScopeName !== values.bookTheScopeName) {
          vendorObj.bookTheScopeCode = values.bookTheScopeName;
        }
        vendorObj.agencyBookList = values.agencyBookList;
        break
      }
      case "FanJia": {
        vendorObj.panJiaSecondAuthUserOID = values.panJiaSecondAuthUserOID.length > 0 ?
          values.panJiaSecondAuthUserOID[0].userOID : null;
        break
      }
      case "KongGang": {
        vendorObj.airportKaWahSecondAuthUserOID = values.airportKaWahSecondAuthUserOID.length > 0 ?
          values.airportKaWahSecondAuthUserOID[0].userOID : null;
        break
      }
      case "YouXing": {
        vendorObj.optimalLineSecondAuthUserOID = values.optimalLineSecondAuthUserOID.length > 0 ?
          values.optimalLineSecondAuthUserOID[0].userOID : null;
        break
      }
    }
    return vendorObj;
  };

  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let vendorObj = this.getReqVendorObj(values);
        this.updateSupplierInfo(vendorObj)
      }
    });
  };
  handleChange = (e) => {
    if (this.state.loading) {
      this.setState({
        loading: false
      })
    }
  };
  handleCancel = (e) => {
    e.preventDefault();
    this.props.toNoEditing();
  };
  switchStatusChange = (e, type) => {
    let vendorObj = this.state.vendorObj;
    vendorObj[type] = e;
    this.setState({
      loading: false,
      vendorObj
    })
  };
  //更新携程子账户
  updateSupplierInfo = (data) => {
    this.setState({
      loading: true,
    });
    PDService.updateSupplierInfo(data)
      .then((data) => {
        this.setState({
          loading: false,
        });
        this.props.savedData(data);
      })
      .catch((err) => {
        this.props.savedData();
      })
  };

  //渲染携程子账户
  renderCtripAccountOption = (data) => {
    if (data && data.length) {
      return data.map((item) => {
        return <Option value={item.value} key={item.code}>{item.messageKey}</Option>
      })
    } else {
      return (<Option value={""} key={1}>{""}</Option>)
    }
  };

  renderNoEditing = () => {
    let vendorObj = this.state.vendorObj;
    //对象请求有延迟
    if (vendorObj.userOID) {
      return (
        <div className="info-item-wrap">
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key269'/*启用状态*/)}：
            </div>
            <div className="info-item-text">
              {vendorObj.enable ? messages('enterprise-manage.key270'/*启用中*/) : messages('enterprise-manage.key271'/*已禁用*/)}</div>
          </div>
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key272'/*携程子账户*/)}：
            </div>
            <div className="info-item-text">{vendorObj.subAccountName}</div>
          </div>

          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key273'/*授权密码*/)}：
            </div>
            <div className="info-item-text">{vendorObj.confirmPasswordView}</div>
          </div>


          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key274'/*授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.confirmUser.fullName}</div>
          </div>

          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key275'/*二次授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.confirm2User.fullName}</div>
          </div>

          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key276'/*抄送授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.confirmCCUser.fullName}</div>
          </div>
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key277'/*抄送二次授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.confirm2CCUser.fullName}</div>
          </div>

          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key387')/*代订类型*/}：
            </div>
            <div className="info-item-text">{vendorObj.helpOthersBookName}</div>
          </div>
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key388')/*代订范围*/}：
            </div>
            <div className="info-item-text">{vendorObj.bookTheScopeName}</div>
          </div>
          {/*罗志鹏 显示指定账户的人员 只显示第一个，其他浮动显示*/}
          {vendorObj.bookTheScopeCode === "O" && <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key389')/*具体代订名单*/}：
            </div>
            <div className="info-item-text">
              <Popover placement="topLeft"
                       content={vendorObj._agencyBookListPopover}
                       overlayStyle={{maxWidth: 400}}>
                {vendorObj._agencyBookList}
              </Popover>
            </div>
          </div>}
          <div className="clear"/>
        </div>
      )
    } else {
      return (<div/>)
    }
  };
  renderNoEditingFanJia = () => {
    let vendorObj = this.state.vendorObj;
    //对象请求有延迟
    if (vendorObj.userOID) {
      return (
        <div className="info-item-wrap">
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key269'/*启用状态*/)}：
            </div>
            <div className="info-item-text">
              {vendorObj.panJiaSecondAuthEnable ? messages('enterprise-manage.key270'/*启用中*/) : messages('enterprise-manage.key271'/*已禁用*/)}</div>
          </div>
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key275'/*二次授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.panJiaSecondAuthName}</div>
          </div>
          <div className="clear"/>
        </div>
      )
    } else {
      return (<div/>)
    }
  };
  renderNoEditingKongGong = () => {
    let vendorObj = this.state.vendorObj;
    //对象请求有延迟
    if (vendorObj.userOID) {
      return (
        <div className="info-item-wrap">
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key269'/*启用状态*/)}：
            </div>
            <div className="info-item-text">
              {vendorObj.airportKaWahSecondAuthEnable ? messages('enterprise-manage.key270'/*启用中*/) : messages('enterprise-manage.key271'/*已禁用*/)}</div>
          </div>
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key275'/*二次授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.airportKaWahSecondAuthName}</div>
          </div>
          <div className="clear"/>
        </div>
      )
    } else {
      return (<div/>)
    }
  };
  renderNoEditingYouXing = () => {
    let vendorObj = this.state.vendorObj;
    //对象请求有延迟
    if (vendorObj.userOID) {
      return (
        <div className="info-item-wrap">
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key269'/*启用状态*/)}：
            </div>
            <div className="info-item-text">
              {vendorObj.optimalLineSecondAuthEnable ? messages('enterprise-manage.key270'/*启用中*/) : messages('enterprise-manage.key271'/*已禁用*/)}</div>
          </div>
          <div className="info-item f-left">
            <div className="info-item-title">
              {messages('enterprise-manage.key275'/*二次授权人*/)}：
            </div>
            <div className="info-item-text">{vendorObj.optimalLineSecondAuthName}</div>
          </div>
          <div className="clear"/>
        </div>
      )
    } else {
      return (<div/>)
    }
  };
  bookTheScopeNameChange = (e) => {
    const {vendorObj} = this.state;
    vendorObj.bookTheScopeCode = e;
    this.setState({
      vendorObj
    })
  };
  /*
  * 我这边估计 这四个消费商的字段，以后还会添加各种不同的字段
  * 这里直接写四个不同的渲染函数
  * */
  renderEditing = () => {
    const {getFieldDecorator} = this.props.form;
    const {loading, vendorObj} = this.state;

    return (
      <div className="info-item-edit-wrap">
        <Form onSubmit={this.handleSave} onChange={this.handleChange}>
          <Row gutter={24}>
            <Col span={12}>
              <FormItem
                label={messages('enterprise-manage.key269'/*启用状态*/)}
                colon={true}>
                {getFieldDecorator('enable', {
                  initialValue: vendorObj.enable,
                  rules: []
                })(
                  <div>
                    <Switch defaultChecked={vendorObj.enable}
                            checkedChildren={<Icon type="check"/>}
                            unCheckedChildren={<Icon type="cross"/>}
                            onChange={(e) => {
                              this.switchStatusChange(e, "enable")
                            }}/>
                    <span className="enabled-type" style={{
                      marginLeft: 20,
                      width: 100
                    }}>{vendorObj.enable ? messages("common.status.enable") : messages("common.disabled")}</span>
                  </div>
                )
                }
              </FormItem>
            </Col>

            <Col span={12}>
              <FormItem
                label={messages('enterprise-manage.key273'/*授权密码*/)}
                colon={true}>
                {getFieldDecorator('confirmPassword', {
                  initialValue: vendorObj.confirmPassword,
                  rules: [
                    {
                      max: 20,
                      message: messages('enterprise-manage.key278'/*最多输入20个字符*/)
                    },
                  ]
                })(
                  <Input placeholder={messages("common.please.enter")}/>)
                }
              </FormItem>
            </Col>

          </Row>

          <Row gutter={24}>
            <Col span={24}>
              {/*bug14085 携程子账户名称 有些很长*/}
              <FormItem
                label={messages('enterprise-manage.key272'/*携程子账户*/)}
                colon={true}>
                {getFieldDecorator('subAccountName', {
                  initialValue: vendorObj.subAccountName,
                  rules: [
                    {
                      required: true,
                      message: messages('common.please.enter')
                    }
                  ]
                })(
                  <Select
                    className="select-ctrip-account"
                    showSearch
                    placeholder={messages('common.please.select')}
                    optionFilterProp="children"
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {
                      this.renderCtripAccountOption(this.state.ctripList)
                    }
                  </Select>
                )
                }
              </FormItem>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key274'/*授权人*/)}
                colon={true}>
                {getFieldDecorator('confirmUser', {
                  initialValue: vendorObj.confirmUser.userOID === null ? [] : [
                    {
                      userOID: vendorObj.confirmUser.userOID,
                      fullName: vendorObj.confirmUser.fullName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           type="user"
                           labelKey="fullName"
                           valueKey="userOID"
                           placeholder={messages('common.please.select')}
                           onChange={this.handleChange}
                           listExtraParams={{}}/>
                )
                }
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key275'/*二次授权人*/)}
                colon={true}>
                {getFieldDecorator('confirm2User', {
                  initialValue: vendorObj.confirm2User.userOID === null ? [] : [
                    {
                      userOID: vendorObj.confirm2User.userOID,
                      fullName: vendorObj.confirm2User.fullName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           labelKey="fullName"
                           valueKey="userOID"
                           placeholder={messages('common.please.select')}
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>

            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key276'/*抄送授权人*/)}
                colon={true}>
                {getFieldDecorator('confirmCCUser', {
                  initialValue: vendorObj.confirmCCUser.userOID === null ? [] : [
                    {
                      userOID: vendorObj.confirmCCUser.userOID,
                      fullName: vendorObj.confirmCCUser.fullName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           placeholder={messages('common.please.select')}
                           labelKey="fullName"
                           valueKey="userOID"
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key277'/*抄送二次授权人*/)}
                colon={true}>
                {getFieldDecorator('confirm2CCUser', {
                  initialValue: vendorObj.confirm2CCUser.userOID === null ? [] : [
                    {
                      userOID: vendorObj.confirm2CCUser.userOID,
                      fullName: vendorObj.confirm2CCUser.fullName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           labelKey="fullName"
                           placeholder={messages('common.please.select')}
                           valueKey="userOID"
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key387')/*代订类型*/}
                colon={true}>
                {getFieldDecorator('helpOthersBookName', {
                  initialValue: vendorObj.helpOthersBookName,
                })(
                  <Select
                    showSearch
                    placeholder={messages('common.please.select')}
                    optionFilterProp="children"
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {
                      this.renderCtripAccountOption(this.state.helpOthersBookCodeList)
                    }
                  </Select>
                )
                }
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key388')/*代订范围*/}
                colon={true}>
                {getFieldDecorator('bookTheScopeName', {
                  initialValue: vendorObj.bookTheScopeName,
                })(
                  <Select
                    onChange={this.bookTheScopeNameChange}
                    showSearch
                    placeholder={messages('common.please.select')}
                    optionFilterProp="children"
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {
                      this.renderCtripAccountOption(this.state.bookTheScopeCodeList)
                    }
                  </Select>
                )
                }
              </FormItem>
            </Col>

            {vendorObj.bookTheScopeCode === "O" && <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key389')/*具体代订名单*/}
                colon={true}>
                {getFieldDecorator('agencyBookList', {
                  initialValue: vendorObj.agencyBookList,
                })(
                  <Chooser single={false}
                           labelKey="fullName"
                           placeholder={messages('common.please.select')}
                           valueKey="userOID"
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>}
          </Row>

          <Button type="primary" loading={loading}
                  htmlType="submit">{messages('common.save') /*保存*/}</Button>
          <Button onClick={this.handleCancel}
                  style={{marginLeft: 8}}> {messages('common.cancel') /*取消*/}</Button>
        </Form>
      </div>
    )
  };
  renderEditingFanJia = () => {
    const {getFieldDecorator} = this.props.form;
    const {loading, vendorObj} = this.state;
    return (
      <div className="info-item-edit-wrap">
        <Form onSubmit={this.handleSave} onChange={this.handleChange}>
          <Row gutter={24}>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key269'/*启用状态*/)}
                colon={true}>
                {getFieldDecorator('panJiaSecondAuthEnable', {
                  initialValue: vendorObj.panJiaSecondAuthEnable,
                  rules: []
                })(
                  <div>
                    <Switch defaultChecked={vendorObj.panJiaSecondAuthEnable}
                            checkedChildren={<Icon type="check"/>}
                            unCheckedChildren={<Icon type="cross"/>}
                            onChange={(e) => {
                              this.switchStatusChange(e, "panJiaSecondAuthEnable")
                            }}/>

                    <span className="enabled-type" style={{
                      marginLeft: 20,
                      width: 100
                    }}>{vendorObj.panJiaSecondAuthEnable ? messages("common.status.enable") : messages("common.disabled")}</span>
                  </div>
                )
                }
              </FormItem>
            </Col>

            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key275'/*二次授权人*/)}
                colon={true}>
                {getFieldDecorator('panJiaSecondAuthUserOID', {
                  initialValue: vendorObj.panJiaSecondAuthUserOID === undefined ? [] : [
                    {
                      userOID: vendorObj.panJiaSecondAuthUserOID,
                      fullName: vendorObj.panJiaSecondAuthName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           labelKey="fullName"
                           valueKey="userOID"
                           placeholder={messages('common.please.select')}
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>
          </Row>
          <Button type="primary" loading={loading}
                  htmlType="submit">{messages('common.save') /*保存*/}</Button>
          <Button onClick={this.handleCancel}
                  style={{marginLeft: 8}}> {messages('common.cancel') /*取消*/}</Button>
        </Form>
      </div>
    )
  };
  renderEditingKongGong = () => {
    const {getFieldDecorator} = this.props.form;
    const {loading, vendorObj} = this.state;
    return (
      <div className="info-item-edit-wrap">
        <Form onSubmit={this.handleSave} onChange={this.handleChange}>
          <Row gutter={24}>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key269'/*启用状态*/)}
                colon={true}>
                {getFieldDecorator('airportKaWahSecondAuthEnable', {
                  initialValue: vendorObj.airportKaWahSecondAuthEnable,
                  rules: []
                })(
                  <div>
                    <Switch defaultChecked={vendorObj.airportKaWahSecondAuthEnable}
                            checkedChildren={<Icon type="check"/>}
                            unCheckedChildren={<Icon type="cross"/>}
                            onChange={(e) => {
                              this.switchStatusChange(e, "airportKaWahSecondAuthEnable")
                            }}/>
                    <span className="enabled-type" style={{
                      marginLeft: 20,
                      width: 100
                    }}>{vendorObj.airportKaWahSecondAuthEnable ? messages("common.status.enable") : messages("common.disabled")}</span>
                  </div>
                )
                }
              </FormItem>
            </Col>

            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key275'/*二次授权人*/)}
                colon={true}>
                {getFieldDecorator('airportKaWahSecondAuthUserOID', {
                  initialValue: vendorObj.airportKaWahSecondAuthUserOID === undefined ? [] : [
                    {
                      userOID: vendorObj.airportKaWahSecondAuthUserOID,
                      fullName: vendorObj.airportKaWahSecondAuthName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           labelKey="fullName"
                           valueKey="userOID"
                           placeholder={messages('common.please.select')}
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>
          </Row>
          <Button type="primary" loading={loading}
                  htmlType="submit">{messages('common.save') /*保存*/}</Button>
          <Button onClick={this.handleCancel}
                  style={{marginLeft: 8}}> {messages('common.cancel') /*取消*/}</Button>
        </Form>
      </div>
    )
  };
  renderEditingYouXing = () => {
    const {getFieldDecorator} = this.props.form;
    const {loading, vendorObj} = this.state;
    return (
      <div className="info-item-edit-wrap">
        <Form onSubmit={this.handleSave} onChange={this.handleChange}>
          <Row gutter={24}>
            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key269'/*启用状态*/)}
                colon={true}>
                {getFieldDecorator('optimalLineSecondAuthEnable', {
                  initialValue: vendorObj.optimalLineSecondAuthEnable,
                  rules: []
                })(
                  <div>
                    <Switch defaultChecked={vendorObj.optimalLineSecondAuthEnable}
                            checkedChildren={<Icon type="check"/>}
                            unCheckedChildren={<Icon type="cross"/>}
                            onChange={(e) => {
                              this.switchStatusChange(e, "optimalLineSecondAuthEnable")
                            }}/>
                    <span className="enabled-type" style={{
                      marginLeft: 20,
                      width: 100
                    }}>{vendorObj.optimalLineSecondAuthEnable ? messages("common.status.enable") : messages("common.disabled")}</span>
                  </div>
                )
                }
              </FormItem>
            </Col>

            <Col span={6}>
              <FormItem
                label={messages('enterprise-manage.key275'/*二次授权人*/)}
                colon={true}>
                {getFieldDecorator('optimalLineSecondAuthUserOID', {
                  initialValue: vendorObj.optimalLineSecondAuthUserOID === undefined ? [] : [
                    {
                      userOID: vendorObj.optimalLineSecondAuthUserOID,
                      fullName: vendorObj.optimalLineSecondAuthName
                    }
                  ],
                  rules: []
                })(
                  <Chooser single={true}
                           labelKey="fullName"
                           valueKey="userOID"
                           placeholder={messages('common.please.select')}
                           onChange={this.handleChange}
                           type="user"/>
                )
                }
              </FormItem>
            </Col>
          </Row>
          <Button type="primary" loading={loading}
                  htmlType="submit">{messages('common.save') /*保存*/}</Button>
          <Button onClick={this.handleCancel}
                  style={{marginLeft: 8}}> {messages('common.cancel') /*取消*/}</Button>
        </Form>
      </div>
    )
  };
  //渲染编辑还是非编辑 通过参数决定
  renderEnterByType = (e, ne) => {
    if (this.props.originEditingStatus) {
      return this[e]();
    } else {
      return this[ne]();
    }
  };
  //Tabs点击
  onChangeTabs = (key) => {
    this.setState({nowTab: key})
  };
  //根据配置渲染 tabs
  renderTabPaneByConfig = () => {
    let filed = PDService.getRenderList(this.props.userCompanyProfile);
    return filed.map(item => {
      return <TabPane tab={item.name} key={item.key}/>
    })
  };
  render() {
    let nowTab = this.state.nowTab;
    let filed = PDService.getRenderList(this.props.userCompanyProfile);
    return (
      <div className="person-vendor-info-wrap">
        <Tabs activeKey={nowTab} onChange={this.onChangeTabs}>
          {this.renderTabPaneByConfig()}
        </Tabs>
        {nowTab === "VendorInfo" && filed.length && this.renderEnterByType("renderEditing", 'renderNoEditing')}
        {nowTab === "FanJia" && filed.length && this.renderEnterByType("renderEditingFanJia", 'renderNoEditingFanJia')}
        {nowTab === "KongGang" && filed.length && this.renderEnterByType("renderEditingKongGong", 'renderNoEditingKongGong')}
        {nowTab === "YouXing" && filed.length && this.renderEnterByType("renderEditingYouXing", 'renderNoEditingYouXing')}
      </div>
    )
  }
}

PersonVendorInfo.propTypes = {
  userCompanyProfile: React.PropTypes.any,// 用户公司的profile
  savedData: React.PropTypes.func.isRequired,//点击保存
  vendorObj: React.PropTypes.object,//基础信息数据对象
  toEditing: React.PropTypes.func,//设置编辑
  toNoEditing: React.PropTypes.func,//设置显示
  originEditingStatus: React.PropTypes.bool//初始化是否是编辑
};
PersonVendorInfo.defaultProps = {
  originEditingStatus: false,
};
const WrappedPersonVendorInfo = Form.create()(PersonVendorInfo);

export default WrappedPersonVendorInfo;
